import 'package:flutter/material.dart';
import '../constants/Constants.dart';
import '../Utils/NetworkUtil.dart';
import '../api/UserApi.dart';

class LoginPage extends StatefulWidget {
  @override
  createState() => new LoginPageState();
}

class LoginPageState extends State<LoginPage> {

  static double _loginViewHeight = 300;
  static double _loginViewWidth(BuildContext context) {
    return getScreenWidth(context)-40*2;
  }
  static double _closeBtnWidth = 30;
  static double _topSpace = 40;
  static double getScreenWidth(BuildContext context) {
    return MediaQuery.of(context).size.width;
  }
  static double getScreenHeight(BuildContext context) {
    return MediaQuery.of(context).size.height;
  }

  String _phoneNum;
  String _code;

  final TextEditingController _textEditingController = TextEditingController();

  void _dismissPageClick () {
    Navigator.of(context).pop();
  }

  void _phoneFieldChanged(String phoneNum) {
    setState(() {
      _phoneNum = phoneNum;
    });
  }

  void _codeFieldChange(String code) {
    _code = code;
  }

  void _dismissKeyboard () {
    FocusScope.of(context).requestFocus(FocusNode());
  }
  // 登录请求
  void _loginBtnClick () {
    Map<String, dynamic> params = new Map();
    params['phone'] = '$_phoneNum';
    params['zone'] = '86';
    params['code'] = '$_code';
    params['isAli'] = 1;

    NetworkUtil.post(UserApi.login, params: params,
        successCallBack: (data) {
      print('data: $data');
    },  failCallBack: (error) {
      print("网络请求出错：$error");
    });
  }

  // 关闭按钮
  Widget _closeBtn () {
    return Container(
      margin: EdgeInsets.only(left: 40, top: _topSpace, right: getScreenWidth(context)-_closeBtnWidth-50),
      child: FlatButton(
        onPressed: () => _dismissPageClick(),
        child: Image.asset(
          'images/login_close.png',
          width: _closeBtnWidth, height: _closeBtnWidth,
        ),
        padding: EdgeInsets.all(2),
        highlightColor: Color(0),
      ),
    );
  }
  // 登录框
  Widget _loginView () {
    return Container (
      decoration: new BoxDecoration(
        color: Color.fromRGBO(255, 255, 255, 0.8),
        borderRadius: BorderRadius.circular(10),

      ),
      width: _loginViewWidth(context),
      margin: EdgeInsets.only(top: (getScreenHeight(context)-_loginViewHeight)*0.5-_closeBtnWidth-_topSpace),
      padding: EdgeInsets.fromLTRB(40, 50, 40, 50),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Image.asset(
            'images/login_title.png',
            width: 110, height: 20,
          ),
          _phoneView(),
          _codeView(),
          _loginBtn(),
        ],
      ),
    );
  }
  // 手机号
  Widget _phoneView () {
    return Container (
      decoration: new BoxDecoration(
        borderRadius: BorderRadius.circular(6),
        border: Border.all(color: Color(Constants.yellowColor)),
      ),
      width: _loginViewWidth(context)-20*2,
      height: 40,
      margin: EdgeInsets.only(top: 35),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Container (
            constraints: BoxConstraints(
                maxHeight: 38,
                maxWidth: _loginViewWidth(context)-20*2-130
            ),
            child: TextField(
              onChanged: _phoneFieldChanged,
              keyboardType: TextInputType.phone,
              decoration: InputDecoration(
                border: InputBorder.none,   // 去掉下划线∂
                contentPadding: const EdgeInsets.only(left: 15),
                hintText: 'Phone number',
                hintStyle: TextStyle(
                  color: Colors.grey,
                  fontSize: 14,
                ),
              ),
            ),
          ),
          // 国际区号
//          FlatButton(
//            onPressed: null,
//            padding: EdgeInsets.fromLTRB(15, 2, 0, 2),
//            child: Container(
//              height: 40,
//              width: 55,
//              child: Row(
//                mainAxisAlignment: MainAxisAlignment.center,
//                children: <Widget>[
//                  Image.asset('images/down_arrow_dark.png', width: 15, height: 10,),
//                  Text('+86')
//                ],
//              ),
//            )
//          )
        ],
      ),
    );
  }
  // 验证码
  Widget _codeView () {
    return Container (
      decoration: new BoxDecoration(
        borderRadius: BorderRadius.circular(6),
        border: Border.all(color: Color(Constants.yellowColor)),
      ),
      width: _loginViewWidth(context)-20*2,
      height: 40,
      margin: EdgeInsets.only(top: 15),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          // 验证码
          Container (
            constraints: BoxConstraints(
              maxHeight: 38,
              maxWidth: _loginViewWidth(context)-20*2-120
            ),
            child: TextField(
              onChanged: _codeFieldChange,
              keyboardType: TextInputType.number,
              decoration: InputDecoration(
                border: InputBorder.none,   // 去掉下划线
                contentPadding: const EdgeInsets.only(left: 15),
                hintText: 'Code',
                hintStyle: TextStyle(
                  color: Colors.grey,
                  fontSize: 14,
                ),
              ),
            ),
          ),
          // 发送验证码
          Container(
            width: 75,
            child: FlatButton (
              padding: EdgeInsets.only(left: 10, right: 10),
              child: Text(
                'Send',
                style: TextStyle(color: Color(0xFFFF7E77), fontSize: 14),
              ),
            ),
          )
        ],
      ),
    );
  }
  // 登录按钮
  Widget _loginBtn () {
    return Container (
      margin: EdgeInsets.only(top: 40),
      width: _loginViewWidth(context)*0.6,
      height: 30,
      decoration: new BoxDecoration(
        color: Color(Constants.yellowColor),
        borderRadius: BorderRadius.circular(6)
      ),
      child: FlatButton(
        onPressed: _loginBtnClick,
        child: Text(
          'LOGIN  NOW',
          style: TextStyle(fontSize: 15, color: Colors.white),
        )
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector (
        onTap: _dismissKeyboard,
        child: SingleChildScrollView(
          child: Container (
            width: getScreenWidth(context),
            height: getScreenHeight(context),
            decoration: new BoxDecoration(
              color: Colors.white,
              image: new DecorationImage(
                image: AssetImage('images/login_bg.png'),
                fit: BoxFit.fill,
              ),
            ),
            child: Column(
              children: <Widget>[
                _closeBtn(),
                _loginView(),
              ],
            ),
          ),
        )
      )
    );
  }
}